<template>
  <el-tabs v-model="activeName" class="post-tab" stretch="true">
    <el-tab-pane label="点餐" name="first">
      <div class="order-meal">
        <div class="tableItem" >
        <el-table
            :data="displayedItems"
            fit="true"
        >
          <el-table-column prop="goods_name" label="商品" align="center"></el-table-column>
          <el-table-column label="数量" align="center">
            <template #default="scope">
              <el-input-number v-model="num[scope.$index].goods_count"
                               :min="1" :max="20" size="small"
                               :style="{width: '80px'}"
                               @increment="IncrChange(scope.row)"
                               @decrement="DecrChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="goods_price" label="单价" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template #default="scope">
              <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
        />
        </div>
        <div class="order-total" >
          <p><span>总数量：</span><span>{{ totalCount }}</span></p>
          <p><span>总金额：</span><span>{{ totalMoney }} 元</span></p>
        </div>
        <div class="order-buttons">
          <el-button color="#626aef" size="large" @click="checkout()">结账</el-button>
          <el-button color="#626aef" size="large" @click="handup()">挂单</el-button>
          <el-button color="#626aef" size="large" @click="remove()">删除</el-button>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="挂单" name="second">
      <div class="order-handup">
        <pos-handup></pos-handup>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import emitter from "../../untils/bus";

const activeName = ref('first')
let totalCount = ref(0)
let totalMoney = ref(0)

let goods_table_data = [];
const num = ref(goods_table_data)

const handleDelete = (index, row) => {
  goods_table_data.splice(index, 1)
  handleCurrentChange(1);
}

// 分页
let currentPage = 1;// 定义当前页码初始值为1
const pageSize = 3;// 定义每页显示的数据条数为5
let total = ref(goods_table_data.length);// 初始化数据总条数
let displayedItems = ref(goods_table_data.slice(0, pageSize));//初始化当前页显示数据

function handleCurrentChange(newPage) {
  currentPage = newPage
  const startIndex = (newPage - 1) * pageSize
  displayedItems.value = goods_table_data.slice(startIndex, startIndex + pageSize)
}


</script>
<style >
* {
  margin: 0;
  padding: 0;
}

.post-tab {
  /*background-color: #888888;*/
  --el-tabs-header-height: 65px;
}

.post-tab p {
  width: 33.333%;
  text-align: center;
  font-size: 1rem;
}

.order-total {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 1rem;
}

.order-total p {
  margin-right: 2rem;
}

.order-total p :last-child {
  font-weight: 600;
  font-size: 1rem;
  color: #e64340;
}

.el-pagination {/*选择分页组件，默认采取Flex布局*/
  justify-content: center;/*水平方向居中对齐*/
  margin-top: 8px;
}

.tableItem{
  height: 300px;
}

.order-buttons{
  display: flex;
  justify-content: center;
  padding: 40px;
}
</style>
